<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>OpenZbox IoT Gateway</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/images/favicon.ico">
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/css/layuimini.css?v=2.0.1" media="all">
    <link rel="stylesheet" href="/css/themes/default.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<style>
    .layui-layer-setwin .layui-layer-close2 {
        right: -11px;
        top: -10px;
    }
    
    .editor-area {
        position: absolute;
        top: 0;
        width: 98%;
        height: 100%;
    }
    
    .editor-area textarea {
        resize: none;
        transition: none !important;
    }
    
    .editor-area .layui-icon-return {
        display: block;
        margin: 10px 0 12px 10px;
        font-size: 18px;
        cursor: pointer;
    }
    
    .editor-form {
        width: 100%;
        height: 100%;
    }
    
    .editor-form form {
        float: left;
        width: 250px;
        overflow: auto;
    }
    
    .editor-form .layui-input-block,
    .editor-work-area .layui-input-block {
        margin: 0;
        min-height: 23px;
    }
    
    .editor-work-area {
        float: left;
        margin-left: 10px;
        width: calc(100% - 260px);
    }
    
    .editor-work-area .layui-textarea {
        /* height: 540px; 
		font-size:10pt;*/
		line-height:20px;
		font-size:14px;
        font-family: Arial, Verdana, Sans-serif;
    }
    
    .editor-form .layuimini-container .table-search-fieldset {
        padding: 0px;
    }
    
    .editor-form .layui-form-item {
        display: flex;
        align-items: center;
        /*justify-content: center;*/
        margin-bottom: 3px;
    }
    
    .editor-form .layui-form-label {
        padding: 0;
        text-align: left;
        width: 60px;
    }
    
    .editor-form button {
        height: 30px;
        line-height: 30px;
    }
    
    .editor-form .layui-input {
        height: 23px;
        margin: 2px 0 !important;
    }
    
    .editor-form .layui-tab-title,
    .editor-form .layui-tab-title .layui-this:after {
        height: 30px;
    }
    
    .editor-form .layui-tab-title li {
        line-height: 30px;
    }
    
    .layui-form-item .layui-form-checkbox {
        margin-top: 5px !important;
    }
    
    .editor-form .justify-content-start {
        justify-content: start;
    }
    
    .editor-form .justify-content-space-around {
        justify-content: flex-end;
    }
    
    .editor-form .justify-content-space-around a {
        text-decoration: underline;
        color: #5454FE;
        margin-right: 21px;
    }
    
    .editor-panel {
        height: 24%;
    }
    
    .editor-panel,
    .editor-panel .block {
        clear: both;
    }
    
    .editor-panel .layui-tab-content {
        padding: 10px;
    }
    
    .editor-panel .layui-tab-item.layui-show {
        animation: none !important;
        -webkit-animation: none !important;
    }
    
    .display-flex {
        display: flex;
        justify-content: space-between;
    }
    
    .editor-panel .layui-tab {
        flex: 14;
        width: 100%;
    }
    
    .editor-panel .layui-input-block {
        display: flex;
        flex-direction: column;
    }
    
    .layui-form-select .layui-input {
        padding: 5px;
        margin: 5px;
    }
    
    .editor-panel .button-style input {
        width: 100px;
        height: 30px;
        margin: 5px 0 !important;
    }
    
    .editor-panel .block {
        display: flex;
        align-items: center;
        margin-left: 10px;
    }
    
    .editor-panel .block a {
        margin-left: 45px;
        text-decoration: revert;
        color: #1e9fff;
    }
    
    .editor-panel .block>div {
        display: flex;
        align-items: center;
        align-items: center;
    }
    
    .editor-panel .block span {
        display: block;
        width: 42px;
    }
    
    .editor-panel .block input {
        width: 50px;
        border: none;
        padding: 0;
    }
    
    .editor-area .layui-btn+.layui-btn {
        margin: 0px;
    }
    
    .pl55 {
        padding-left: 55px;
    }
    
    .w85 {
        width: 67px;
        height: 30px;
    }
    
    .sending-area {
        display: flex;
        flex-direction: column;
    }
    
    .sending-area>div {
        display: flex;
        align-items: center;
        padding-right: 10px;
    }
    
    .sending-area input[name="sendbytes"] {
        margin-top: 5px !important;
    }
    
    .mt10 {
        margin-top: 7px;
        color: #6b6b6b;
    }
    
    .mt10 input {
        border: none;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        height: 24px;
        width: 70px;
    }
    
    .h-100 {
        height: 100%;
    }
    
    .h-95 {
        height: 95%;
    }
    
    .layui-tab-content .layui-tab-item {
        /* display: flex !important;
        justify-content: space-between; */
    }
    
    .layuimini-content-page {
        height: calc(100% - 10px) !important;
    }
    
    textarea.font-color {
        background: #000;
        color: #fff;
    }
    
    .layui-tab-content .layui-tab-item>div {
        display: flex !important;
    }
    
    .layui-tab-content .layui-tab-item>div>div:nth-child(1) {
        flex: 15;
    }
    
    .layui-tab-content .layui-tab-item>div>div:nth-child(2) {
        flex: 1;
    }
</style>

<body class="layui-layout-body layuimini-all">
    <div class="layui-layout layui-layout-admin">
        <div class="layuimini-container layuimini-page-anim" style="height: calc(100% - 30px);">
            <div class="layuimini-main editor-area">
                <div class="editor-form layui-form" lay-filter="port">
                    <div style="resize: both;height: 70%;">
                        <form class="h-100">
                            <fieldset class="table-search-fieldset">
                                <legend>串口设置</legend>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">串口:</label>
                                    <div class="layui-input-block">
                                        <input type="text" readOnly="true" name="portName" id="portname" autocomplete="off" class="layui-input input-disabled">
                                        <input type="text" readOnly="true" name="address" autocomplete="off" class="layui-input input-disabled">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">波特率:</label>
                                    <div class="layui-input-block">
                                        <select name="baudRate" lay-verify="required" id="changeBaud">
                                    <option value="1200">1200</option>
                                    <option value="2400">2400</option>
                                    <option value="4800">4800</option>
                                    <option value="9600">9600</option>
                                    <option value="14400">14400</option>
                                    <option value="19200">19200</option>
                                    <option value="38400">38400</option>
                                    <option value="56000">56000</option>
                                    <option value="57600">57600</option>
                                    <option value="115200">115200</option>
                                    <option value="230400">230400</option>
                                    <option value="256000">256000</option>
                                    <option value="460800">460800</option>
                                 </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">校验位:</label>
                                    <div class="layui-input-block">
                                        <select name="parity" lay-verify="required">
                                    <option value="N">None</option>
                                    <option value="O">Odd</option>
                                    <option value="E">Even </option> 
                                  </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">数据位:</label>
                                    <div class="layui-input-block">
                                        <select name="dataBits" lay-verify="required">
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                  </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">停止位:</label>
                                    <div class="layui-input-block">
                                        <select name="stopBits" lay-verify="required">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                  </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label" style="width:50px">&nbsp;</label>
                                    <div class="layui-input-block ">
                                        <button type="button" class="layui-btn layui-btn-sm" lay-event="openport">打开</button>
                                        <button type="button" style="display:none" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="pauseport">暂停</button>
                                        <button type="button" style="display:none" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="closeport">关闭</button>
                                        <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="save">保存</button>
                                    </div>
                                </div>

                            </fieldset>

                            <!-- <br> -->
                            <fieldset class="table-search-fieldset">
                                <legend>接收区设置</legend>

                                <div class="layui-form-item pl55 justify-content-start">
                                    <input type="checkbox" id="showTime" lay-filter="showTime" title="显示接收时间" lay-skin="primary">
                                </div>
                                <div class="layui-form-item pl55 justify-content-start">
                                    <input type="checkbox" name="showHexadecimal" lay-filter="showHexadecimal" title="十六进制显示" lay-skin="primary">
                                </div>
                                <div class="layui-form-item pl55 justify-content-start">
                                    <input type="checkbox" lay-filter="fontColor" title="白底黑字显示" lay-skin="primary">
                                </div>
                            </fieldset>

                            <fieldset class="table-search-fieldset">
                                <legend>附加控制</legend>
                                <div class="layui-form-item pl55 justify-content-start">
                                    <input type="checkbox" name="r120" title="接入终端电阻" lay-skin="primary">
                                </div>
                                <div class="layui-form-item pl55 justify-content-start">
                                    <input type="checkbox" name="booton" title="自动打开端口" lay-skin="primary">
                                </div>
                                <div class="layui-form-item pl55 justify-content-start">
                                    <input type="checkbox" name="" title="接收转向文件..." lay-skin="primary">
                                </div>
                            </fieldset>
                            <!-- <br> -->

                            <!-- <fieldset class="table-search-fieldset">
                        <legend>发送区设置</legend>
                        <div class="layui-form-item pl55 justify-content-start">
                            <input type="checkbox" name="" title="自动发送附加位" lay-skin="primary">
                        </div>
                        <div class="layui-form-item pl55 justify-content-start">
                            <input type="checkbox" name="" title="发送完自动清空" lay-skin="primary">
                        </div>
                        <div class="layui-form-item pl55 justify-content-start">
                            <input type="checkbox" name="" title="按十六进制发送" lay-skin="primary">
                        </div>
                        <div class="layui-form-item pl55 justify-content-start">
                            <input type="checkbox" name="" title="数据流循环发送" lay-skin="primary">
                        </div>

                    </fieldset> -->
                            <!-- <br> -->
                        </form>
                        <div class="editor-work-area h-100">
                            <fieldset class="table-search-fieldset h-95">
                                <legend>数据接收区</legend>
                                <div class="layui-input-block h-100">
                                    <textarea   class="layui-textarea h-100"  id="receivedarea" spellcheck="false"></textarea>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <!-- <form> -->
                    <div class="editor-panel">
                        <div class="display-flex" style="height:88%">
                            <div class="layui-tab">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">单条发送</li>
                                    <li>多条发送</li>
                                    <li>协议传输</li>
                                    <li>帮助</li>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        <div>
                                            <div class="layui-input-block">
                                                <div class="sending-area">
                                                    <div>
                                                        <div class="layui-form-item">
                                                            <input type="checkbox" lay-filter="hexadecimal" title="按十六进制发送" lay-skin="primary">
                                                        </div>
                                                        <div class="layui-form-item">
                                                            <input type="checkbox" lay-filter="lineFeed" checked title="发送换行" lay-skin="primary">
                                                        </div>
                                                        <input id="sendbytes" class="layui-input"></input>
                                                    </div>
                                                    <div>
                                                        <div class="layui-form-item">
                                                            <input type="checkbox" name="" title="自动发送附加位" lay-skin="primary">
                                                        </div>
                                                        <div class="layui-form-item">
                                                            <input type="checkbox" namex="timed" title="定时发送" lay-skin="primary">
                                                        </div>
                                                        <div class="layui-form-item mt10">
                                                            周期输入： <input type="input" namex="ms" title="" lay-skin="primary" value="1000">ms
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="layui-btn-container" style="margin-top:0px">
                                                <button type="button" style="margin:5px" class="layui-btn layui-btn-sm  layui-btn-disabled" id="sendbtn" disabled lay-event="send">&nbsp;发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送&nbsp;</button>
                                                <button type="button" style="margin:5px;display: none;" class="layui-btn layui-btn-danger layui-btn-sm " lay-event="stop">停止发送</button>
                                                <button type="button" style="margin:5px" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="clear">清除发送</button>
                                                <button type="button" style="margin:5px" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="clearData">清除数据</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-tab-item">
                                        <div class="layui-input-block">
                                            <textarea id="msendbytes" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-tab-item">
                                        <div class="layui-input-block">
                                            <textarea id="desc" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-tab-item">
                                        <div class="layui-input-block">
                                            <textarea id="desc" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="block" style="height:12%">
                            <div>
                                <span>接收：</span>
                                <input type="text" readOnly="true" namex="receive" id="receivecouter" lay-verify="receive" autocomplete="off" class="layui-input">
                                <span>bytes</span>
                            </div>

                            <div style="margin-left:50px">
                                <span>发送：</span>
                                <input type="text" readOnly="true" namex="send" id="sendcouter" autocomplete="off" class="layui-input"></div>
                            bytes
                            <a href="javascript:;" lay-event="restoration">复位</a>
                        </div>
                    </div>
                    <!-- </form> -->

                </div>
            </div>
        </div>
    </div>
</body>

<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="/js/lay-module/il8n/jquery.i18n.properties.js"></script>
<script src="/lib/layui-v2.8.11/layui/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>

	function getQueryString(name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    let r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return decodeURIComponent(r[2]);
    };
    return null;
 }

    var ISPAUSE = false;
    layui.use(['form', 'table', 'miniPage', 'util', "layer"], function() {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            util = layui.util,
            ws,
            timer,
            addTime = false;
        showHexadecimal = false;

		/*
        var option = $(`option[value="${params.baudRate}"]`);
        if (option.length === 0) {
            $("#changeBaud").append(`<option value="${params.baudRate}">${params.baudRate}</option>`)
        };*/
		$.ajax({
				url: '/xapi/ports/'+getQueryString("name"),
				type: "GET",
				success: function(port) { 
					//console.log(data);
					setForm(port);
				},
				error: function() {
					setForm();
				},
		});

        //form.render("select");
        //data &&
		function setForm(port = {}) {
			form.val("port", {
				portName: port.name,
				booton: port.booton,
				r120: port.r120,
				address: port["opts"]["address"],
				baudRate: port["opts"]["baudRate"],
				dataBits: port.dataBits || 8,
 				parity: port["opts"]["parity"],
				stopBits: port.stopBits || 1,
				receive: port.receive || 0,
				send: port.send || 0,
				//fontColor: true,
			});
			form.render();
		}
        // $(".editor-area").show();
        var datline = 0;
        $('.layui-select-title .layui-unselect').attr("readonly", false);
        $("i[lay-filter='return']").click(function() {
            $(".editor-area").hide();
            ws.close();
            $("button[lay-event='stop']").hide();
            $("button[lay-event='send']").show();
            $('#sendbytes').attr("readonly", false);
            $('input[name="ms"]').attr("readonly", false);
            $(".input-disabled").removeClass("layui-disabled");
            $("select").removeAttr("disabled", "disabled");
            $("button[lay-event='closeport']").hide();
            $("button[lay-event='openport']").show();
            $("#sendbtn").addClass("layui-btn-disabled");
            $("#sendbtn").attr("disabled", "disabled");
            clearInterval(timer)
        });
        util.event("lay-event", {
            openport: function(e) {
                var data = form.val("port"),
                    that = data;
                if (!data.address || !data.baudRate || !data.parity || !data.dataBits || !data.stopBits) {
                    return false
                };

				data.baudRate = parseInt(data.baudRate);
				data.dataBits = parseInt(data.dataBits);
				data.stopBits = parseInt(data.stopBits);

				console.log(data);
                $.ajax({
                    url: '/xapi/openport',
                    type: "POST",
 					headers : {'Content-Type' : 'application/json;charset=utf-8'}, 
                    data: JSON.stringify(data),
                    success: function(data) {
                        // data = JSON.parse(data);
                        if (data.code === 1) {
                            ISPAUSE = false;

                            // form.render("select");
                            ws = new WebSocket(getWSpath() + '?id=' + that.name);
                            ws.binaryType = 'arraybuffer'; // "blob";//
                            ws.onopen = () => {
                                /*layer.msg("连接成功", {
                                    icon: 1
                                });
                                form.val("port", {
                                    "dev": "dev"
                                });*/
                                $("button[lay-event='openport']").hide();
                                $(".input-disabled").addClass("layui-disabled");
                                $("select").attr("disabled", "disabled");
                                $("button[lay-event='closeport']").show();
                                $("button[lay-event='pauseport']").show();
                                $("button[lay-event='pauseport']").text("暂停");
                            };
                            ws.onmessage = (msg) => {
                                var obj = $("#receivedarea");
                                var $receive = $("#receivecouter")
                                var height = obj[0].scrollHeight;
                                // var receive = parseInt(form.val("port").receive);
                                var rdat;
                                //console.log("Received arraybuffer",msg.data);
                                if (ISPAUSE != true) {
                                    if (msg.data instanceof ArrayBuffer) {
                                        if (showHexadecimal) {
                                            rdat = buf2hex(msg.data) + " ";
                                        } else {
                                            rdat = buf2string(msg.data);
                                        }
                                    }
                                    length = (rdat.replace(/\s+/g, "")).length; //getBytesLength(msg.data, showHexadecimal ? msg.data.length / 2 : msg.data.length);
                                    //if (rdat.startsWith("$GNRMC")){
                                    // form.val("port", {
                                    //     "receivedarea": obj.val() + (addTime ? setTime() + " " + rdat : rdat), //+"\r\n"
                                    //     receive: receive + length
                                    // });
                                    obj.val(obj.val() + (addTime ? setTime() + " " + rdat : rdat));
                                    $receive.val(parseInt($receive.val()) + length);
                                    obj.scrollTop(height);

                                    datline++;
                                    if (datline >= 1000) {
                                        $("#receivedarea").val('');
                                        datline = 0;
                                    }
                                    //}

                                }
                            };
                            $("#sendbtn").removeClass("layui-btn-disabled");
                            $("#sendbtn").removeAttr("disabled", "disabled");

                        } else {
                            layer.msg(data.desc, {
                                icon: 3
                            });
                        }
                    },
                });
            },
            closeport: function(e) {
                $.ajax({
                    url: '/xapi/closeport',
                    type: "POST",
                    data: form.val("port"),
                    success: function(data) {
                        // data = JSON.parse(data);
                        if (data.code === 1) {
                            /* ws.onclose = () => {
                            	layer.msg("连接关闭", {
                            		icon: 1
                            	});
                            }*/
                            $("#sendbtn").addClass("layui-btn-disabled");
                            $("#sendbtn").attr("disabled", "disabled");
                            ws.close();
                        };
                        ISPAUSE = false;
                    },
                });
                $(".input-disabled").removeClass("layui-disabled");
                $("select").removeAttr("disabled", "disabled");
                $("button[lay-event='closeport']").hide();
                $("button[lay-event='pauseport']").hide();
                $("button[lay-event='openport']").show();
                //form.render("select");
            },
            pauseport: function(e) {
                ISPAUSE = !ISPAUSE;
                if (ISPAUSE == true) {
                    $("button[lay-event='pauseport']").text("继续");
                } else {
                    $("button[lay-event='pauseport']").text("暂停");
                }
            },
            save: function() {
                $.ajax({
                    url: '/xapi/save',
                    type: "POST",
                    data: form.val("port"),
                    success: function(data) {
                        data = JSON.parse(data);
                        if (data.code === 1) {
                            layer.msg("保存成功", {
                                icon: 1
                            });
                        };
                    },
                });
            },
            send: function() {
                var isCheck = form.val("port").timed;
                var ms = form.val("port").ms;
                if (isCheck) {
                    timer = setInterval(() => {
                        sendserver()
                    }, ms)
                    $("button[lay-event='send']").hide();
                    $("button[lay-event='stop']").show();
                    $('#sendbytes').attr("readonly", true);
                    $('#ms').attr("readonly", true);
                } else {
                    sendserver()
                };
            },
            stop: function() {
                $("button[lay-event='stop']").hide();
                $("button[lay-event='send']").show();
                $('#sendbytes').attr("readonly", false);
                $('#ms]').attr("readonly", false);
                clearInterval(timer)
            },
            clearData: function() {
                $("#receivedarea").val('')
            },
            restoration: function() {
                $("#receivecouter").val("0");
                $("#sendcouter").val("0");
            }
        });

        function stringToBytes(str) {
            return hexToBytes(stringToHex(str));
        }

        // Convert a ASCII string to a hex string
        function stringToHex(str) {
            return str.split("").map(function(c) {
                return ("0" + c.charCodeAt(0).toString(16)).slice(-2);
            }).join("");
        }

        function hexToBytes(hex) {
            for (var bytes = [], c = 0; c < hex.length; c += 2)
                bytes.push(parseInt(hex.substr(c, 2), 16));
            return bytes;
        }

        // Convert a hex string to a ASCII string
        function hexToString(hexStr) {
            var hex = hexStr.toString(); //force conversion
            var str = '';
            for (var i = 0; i < hex.length; i += 2)
                str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
            return str;
        }

        function buf2string(buffer) {
            var hex = Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join('');
            return hexToString(hex).toUpperCase();
        }

        function buf2hex(buffer) { // buffer is an ArrayBuffer
            return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join(' ');
        }

        function sendserver() {
            var data = form.val("port");
            if (!data.sendbytes) {
                return layer.msg("发送数据不能为空", {
                    icon: 2
                });
            }
            if (data.hexadecimal) {
                var isBol = /^[A-Fa-f0-9]{2,128}$/.test(data.sendbytes);
                if (!isBol || (data.sendbytes.length % 2 != 0)) {
                    return layer.msg("请输入十六进制数据", {
                        icon: 2
                    });
                }
            }
            var sendbytesLenght = calBytesLength(data.sendbytes, data.hexadecimal ? data.sendbytes.length / 2 : data.sendbytes.length);
            form.val("port", {
                send: parseInt(data.send) + sendbytesLenght + (data.lineFeed ? 2 : 0)
            });
            var sdata = {};
            sdata["name"] = $("#portname").val();
            sdata["type"] = (data.hexadecimal ? 1 : 0);
            if (data.hexadecimal) {
                sdata["data"] = $("#sendbytes").val() + ((data.lineFeed) ? "0d0a" : "");
            } else {
                sdata["data"] = $("#sendbytes").val() + ((data.lineFeed) ? "\r\n" : "");
            }
            ws.send(JSON.stringify(sdata));

            /*
            var img = canvas_context.getImageData(0, 0, 400, 320);
            var binary = new Uint8Array(img.data.length);
            for (var i = 0; i < img.data.length; i++) {
              binary[i] = img.data[i];
            }
            ws.send(binary.buffer);
            */
        }

        form.on('checkbox(fontColor)', function(data) {
            $("#receivedarea").toggleClass("font-color")
        });

        form.on('#showTime', function(data) {
            addTime = data.elem.checked;
        })
        form.on('checkbox(showHexadecimal)', function(data) {
            showHexadecimal = data.elem.checked;
        })

        function setTime() {
            var date = new Date();
            let h = new Date(date).getHours();
            h = h < 10 ? "0" + h : h;
            let m = new Date(date).getMinutes();
            m = m < 10 ? "0" + m : m;
            let s = new Date(date).getSeconds();
            s = s < 10 ? "0" + s : s;
            let ms = new Date(date).getMilliseconds();
            if (ms < 10) {
                ms = "00" + ms
            }
            if (ms >= 10 && ms < 100) {
                ms = "0" + ms
            }
            if (ms >= 100) {
                ms = ms
            }
            return h + ":" + m + ":" + s + ":" + ms;
        }

        function calBytesLength(val, len) {
            var str = new String(val);
            var bytesCount = 0;
            for (var i = 0, n = len; i < n; i++) {
                var c = str.charCodeAt(i);
                if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
                    bytesCount += 1;
                } else {
                    bytesCount += 2;
                }
            }
            return bytesCount;
        }
    });

    function getWSpath() {
        var loc = window.location,
            new_uri;
        if (loc.protocol === "https:") {
            new_uri = "wss:";
        } else {
            new_uri = "ws:";
        }
        new_uri += "//" + loc.host + "/ws";
        //new_uri = "ws://192.168.0.105/ws"
        return new_uri;
    }

</script>